<template>
	<div class="cart container">
		<header>
        <i class="iconfont icon-fanhui" @click="gobock"></i>
        <span>购物车</span>
        <span @click="isNavBar" v-text='isNavStatus ? "完成" : "编辑"'>编辑</span>
    </header>

    <section v-if="list.length">
      <div class="cart-title">
        <van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
        <span>商品</span>
      </div>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <!-- 左 -->
          <div class="check">
            <van-checkbox @click="CHECK_ITEM(index)" v-model="item.checked"></van-checkbox>
          </div>
          <!-- 中 -->
          <h2>
            <img :src="item.goods_imgUrl" alt="">
          </h2>
          <!-- 右 -->
          <div class="goods">
              <div class="goods-title">
                <!-- 盒子 武夷山原产地 全压买话题 快快来来买卖啊啊啊，价格优惠又便宜 -->
                <span>{{item.goods_name}}</span>
                <i class="iconfont icon-gouwuche" @click="delGoods(item.id)"></i>
              </div>
              <div class="goods-price">￥{{item.goods_price}}</div>
              <van-stepper v-model="item.goods_num" integer />
          </div>
        </li>
      </ul>
    </section>
    <section v-else>
      没有购物车数据
      <router-link to="/home">去首页看看...</router-link>
    </section>

    <footer v-if="list.length">
      <div class="radio">
        <van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
      </div>
      <div class="total" v-show="!isNavStatus">
        <div>共有 <span class="total-active">{{total.num}}</span> 件商品</div>
        <div>
          <span>总计：</span>
          <span class="total-active">￥{{total.price.toFixed(2)}} + 0茶币</span>
        </div>
      </div>
      <div class="order" v-if="isNavStatus" @click="delGoods">删除</div>
      <div class="order" v-else>去结算</div>
    </footer>
	</div>
</template>

<script>
import { mapMutations, mapState, mapActions, mapGetters } from 'vuex';

import http from '@/common/api/request.js'
export default {
  name: "Cart",
  data() {
    return {
      isNavStatus: false,
      checked: true
    }
  },
  computed: {
    ...mapState({
      list: state=>state.cart.list
    }),
    ...mapGetters(['isCheckedAll', 'total'])
  },
  methods: {
    ...mapMutations(['CART_LIST', 'CHECK_ITEM']),
    ...mapActions(['checkAllFn', 'delGoods']),
    gobock() {
      this.$router.back()
    },
   async getData() {

    let res = await http.$axios({
      url:'/api/selectCart',
        method:'post',
        headers:{
            token:true
        },
    })
      this.CART_LIST(res.data)

        res.data.forEach(v => {
          v['checked'] = true
        });
    },
    // 点击编辑\完成
    isNavBar() {
      this.isNavStatus = !this.isNavStatus
    }
  },
  created(){
    this.getData();
  }
};

</script>

<style scoped>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b0352f;
    height: 1rem;
    color: #FFF;
  }
  header i {
    padding: 0 .4rem;
    font-size: .50rem;
  }
  header span {
    padding: 0 .4rem;
    font-size: .45rem;
  }
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.2rem;
    border-top: .04rem solid #ccc;
  }
  footer .radio {
    padding: 0 0.4rem;
  }
  footer .total {
    flex: 1;
    font-size: .35rem;
  }
  footer .total .total-active {
    color: #b0352f;
  }
  footer .order {
    width: 3.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    font-size: .4rem;
    background-color: #b0352f;
    color: #FFF;
  }
  section {
    background-color: #F5F5F5;
  }
  section .cart-title {
    padding: .2rem;
    display: flex;
  }
  section .cart-title span {
    padding: 0 .2rem;
    font-weight: 500;
    font-size: .44rem;
  }

  section ul {
    display: flex;
    flex-direction: column;
  }
  section ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF;
    padding: 0.16rem 0.2rem;
    margin: .16rem 0;
  }
  section ul li img {
    width: 1.48rem;
    height: 1.48rem;
  }
  .goods {
    display: flex;
    flex-direction: column;
    font-size: .4rem;
    background-color: #FFF;
    padding-left: .4rem;
  }
  
  .goods .goods-title {
    display: flex;
  }
  .goods .goods-title i {
    font-size: 0.6rem;
  }
  .goods .goods-title .goods-price {
    color: #b0352f;
    padding: .06rem 0;
  }
  ::v-deep .van-stepper {
    text-align: right;
  }
  section ul li .check {
    padding-right: .28rem;
  }
</style>